@use '../../../util/events' as events;

.sx__time-grid-event {
  width: calc(100% - 10px);
  padding: var(--sx-spacing-padding1);
  position: absolute;
  border-radius: var(--sx-rounding-extra-small);
  font-size: var(--sx-font-extra-small);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;

  &.is-event-copy {
    opacity: 0.5;
    box-shadow: var(--sx-box-shadow-level3);
    z-index: 1;
    transition: transform 0.15s ease-in-out;
  }

  @include events.is-event-new;
}

[data-has-dnd='true'] {
  .sx__time-grid-event {
    touch-action: none;
  }
}

.sx__is-resizing {
  .sx__time-grid-event:has(+ .is-event-copy) {
    opacity: 0;
  }

  .is-event-copy {
    opacity: 1;
  }
}

.sx__time-grid-event-inner {
  position: relative;
  height: 100%;
}

.sx__time-grid-event-resize-handle {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
  cursor: ns-resize;
  height: clamp(10px, 20px, 50%);
  touch-action: none;
}

.sx__time-grid-event-title {
  font-weight: 600;
}

.sx__time-grid-event-time,
.sx__time-grid-event-people,
.sx__time-grid-event-location {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.sx__title-and-time-compact {
  display: flex;
  align-items: center;
  gap: var(--sx-spacing-padding2);
  
  .sx__time-grid-event-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .sx__time-grid-event-time {
    flex-shrink: 0;
  }
}

.sx__event-icon {
  min-width: 15px;
  min-height: 15px;
  max-width: 15px;
  max-height: 15px;
  margin-inline-end: var(--sx-spacing-padding2);
}
